
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link></div>
         --> <div class="hei10"></div>

				<div class="o_ul">
					<router-link class="o_li"  to="/productionBasismanag">产品渠道中心</router-link>
					<router-link class="o_li " v-if="checkquanxian('P010102').length > 0" to="/productionBasismanag/productionBasismanagSoldout">已下架的产品</router-link>
					<router-link class="o_li  acts bgw" v-if="checkquanxian('P010103').length > 0" to="/productionBasismanag/productionBasismanagDj">自动生产对接</router-link>
				</div>
<!--        <div class="kflexc" style="padding: 35px 40px 0;">
          <div class="nli" style="font-size: 24px;" :class="act == 1?'nliact':''" @click="$router.push('/productionBasismanag/productionBasismanagDj')">API接口</div>
          <div class="nli" style="font-size: 24px;" :class="act == 2?'nliact':''" @click="$router.push('/productionBasismanag/productionBasismanagAI')" >模拟人工接口</div>
        </div> -->
				<div class="t_add_cont">
					<div style="margin-bottom:20px;display: flex;justify-content: space-between;">
						<div>
							<span style="font-size: 14px;color:#606266">接口渠道名称：</span>
							<el-input
								placeholder="请输入接口渠道名称"
								style="width: 180px;"
								v-model="searchfrom.c_name">
							</el-input>
							<el-button @click="search" type="danger" round>搜索</el-button>
						</div>
						<router-link   style="margin-left:10px" to="/productionBasismanag/productionBasismanagCheck">
							<el-button round type="danger" style="background: rgb(255, 154, 12) !important; color: #fff !important; border:0;" plain>订单重查></el-button>
						</router-link>
					</div>
					<!-- tips -->
					<!-- <div class="t_tips_box">
						<div>自动生产可以把订单信息通过接口自动提交给运营商或上游系统并返回生产信息</div>
						<div>申请自动生产接口对接
							<span @click="openwx" class="t_chatkf">联系客服微信</span>
						</div>
					</div> -->
					<!-- 列表 -->
					<el-table
					:header-cell-style="{background:'#F9F9F9',color:'#3D3D3D'}"

					:data="tableData"
					style="width: 100%">
						<el-table-column align="center" label="接口渠道名称">
              <template slot-scope="scope">
              {{scope.row.user_defined_name}}
              <i class="el-icon-edit"  @click="xiugai2(scope.row)" style="margin-left: 20px; color: #409EFF; cursor: pointer;"></i>
              </template>
						</el-table-column>


            <el-table-column
            	align="center"
            	label="选号功能">

            	<template slot-scope="scope">
                <span v-if="scope.row.pick_number">支持</span>
<span v-if="!scope.row.pick_number">不支持</span>
            	</template>
            </el-table-column>
						<el-table-column
							align="center"
							prop="channel_id"
							label="渠道接口ID">
						</el-table-column>
						<el-table-column
							align="center"
							prop="created_at"
							label="开通时间">
						</el-table-column>
						<el-table-column
							align="center"
							prop="kfpz"
							label="开发配置">

							<template slot-scope="scope">
								已配置
								<!-- <el-button
								@click="opendev"
								type="text">编辑</el-button> -->
							</template>
						</el-table-column>

            <el-table-column align="center" label="异常订单自动处理">
            	<template slot-scope="scope">
            		<div class="kflexcc">
                  <div v-if="scope.row.handle_type == 0">异常订单人工处理</div>
                  <div v-if="scope.row.handle_type == 1">异常订单自动生产失败</div>
                  <i class="el-icon-edit-outline" style="color: #409EFF; font-size: 18px; cursor: pointer; margin-left: 3px;" @click="xiugai(scope.row)"></i>
                </div>

            	</template>
            </el-table-column>
            <el-table-column	align="center" prop="problem" label="接口订单数据">
            	<template slot-scope="scope">
            		<!-- <el-button @click="goid('/productionBasismanag/qudaodingdan',scope.row.channel_id)" type="text">查看</el-button> -->
                <el-button type="text" @click="$router.push('/productionBasismanag/xianzhiqudao?id='+scope.row.channel_id)">查看</el-button>
            	</template>
            </el-table-column>

						<el-table-column
							align="center"
							prop="problem"
							label="接口帮助">
							<template slot-scope="scope">
								<el-button @click="checkdesc(scope.row.problem)" type="text">查看说明文档</el-button>
							</template>
						</el-table-column>
						<el-table-column
							align="center" width="300px"
							prop="jkhelp"
							label="操作">
							<template slot-scope="scope">
								<router-link :to="{path:'/productionBasismanagAdd',query :{channel_id:scope.row.channel_id,upload_resource:JSON.parse(scope.row.data).upload_resource?JSON.parse(scope.row.data).upload_resource:1}}">
									<el-button  type="text" style="margin-right: 10px;">管理对接产品</el-button>
								</router-link>

								<el-button @click="checkison(scope.row)" v-if="(shopid == 304676 || shopid == 50481)&&scope.row.is_online==1" type="text">查在网状态</el-button>
								<el-button @click="tocheckison(scope.row)" v-if="shopid == 304676 || shopid == 50481" type="text">在网查询记录</el-button>
                <el-button @click="dingdanchongti(scope.row)"  type="text">订单重提</el-button>


							</template>
						</el-table-column>
					</el-table>
					<!-- 对接流程 -->
					<div class="t_djstept_box">
						<div style="color:#7D7D7D;margin-bottom:50px">自动生产接口对接流程</div>
						<div>
							<el-steps :active="4" align-center>
								<el-step title="申请对接" description="联系商务对接提供：接口文档及文档对接参数"></el-step>
								<el-step title="技术评估" description="拉群沟通评估费用及开发周期"></el-step>
								<el-step title="接口完成配置产品" description="在需要自动生产的产品上配置自动生产的接口"></el-step>
								<el-step title="测试期" description="跟踪订单提交情况，了解返回订单失败原因及处理方法"></el-step>
							</el-steps>
						</div>
					</div>
				</div>

			</div>
		</div>
		<!-- <foot></foot> -->
		<!-- 二维码弹窗 -->
		<el-dialog
		title="联系微信客服" center
		:visible.sync="chatwxshow"
		width="300px"
		>
			<img style="width: 100%;" src="../../../static/kefu.png" alt="">
		</el-dialog>
		<!-- 查看说明文档 -->
		<el-dialog center
		title="查看说明文档"
		:visible.sync="descshow"
		width="500px"
		>
			<div>{{desclink}}</div>
		</el-dialog>
		<!-- 开发配置 -->
		<el-dialog center
		title="编辑/配置"
		:visible.sync="developshow"
		width="800px"
		>

		</el-dialog>

    <el-dialog title="异常订单自动处理设置" center :visible.sync="zidonglog" width="800px">
        <el-radio v-model="all.handle_type" label="1" style="margin-bottom: 20px;">
          <div style="font-size: 16px; color: #666; margin-bottom: 10px;">异常订单自动生产失败（粗放）</div>
          <div style="font-size: 14px; color: #999;">提单被上游打回或提单成功后被打回的异常订单直接将订单状态设置为“生产失败”</div>
        </el-radio>
        <el-radio v-model="all.handle_type" label="0">
          <div style="font-size: 16px; color: #666; margin-bottom: 10px;">异常订单人工处理订单（细致）</div>
          <div>
            <div style="font-size: 16px; color: #999; margin-bottom: 10px;">接口返回异常的订单将陈列在“自动生产订单”页面的“提单异常”和“生产异常”中，等待人工处理</div>
            <div style="font-size: 14px; color: #999;">ps:您可以根据常见的异常原因创建规则来自动处理响应的订单。</div>
          </div>
        </el-radio>

        <div slot="footer" class="dialog-footer">
        	<el-button round type="danger"  @click="queding">确定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改接口渠道名称" center :visible.sync="log" width="440px">
        <el-input
        	placeholder="请输入接口渠道名称"
        	v-model="xiugaiall.user_defined_name">
        </el-input>

        <div slot="footer" class="dialog-footer">
        	<el-button round type="danger" @click="queding2">确定</el-button>
        </div>
    </el-dialog>
	<!-- 在网状态查询 -->
	<el-dialog
	title="在网状态查询"
	:center="true"
	:visible.sync="ischecktimeshow"
	width="500px">
		<el-date-picker
		style="width: 100%;"
		v-model="checktime"
		type="datetimerange"
		value-format="yyyy-MM-dd HH:mm:ss"
		range-separator="至"
		start-placeholder="开始日期"
		end-placeholder="结束日期">
		</el-date-picker>
		<div style="text-align: center;padding-top: 30px;">
			<el-button type="danger" round  style="background-color: #2974FF;" @click="checkbtn">查询</el-button>
		</div>
	</el-dialog>

  <el-dialog title="订单重提" :visible.sync="logc" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">

      <!-- <el-select v-model="chongtiall.time" style="width: 400px; margin-bottom: 20px;" placeholder="请选择周期">
        <el-option :label="item" :value="item" v-for="item in 100"></el-option>

      </el-select> -->
      <div class="kflexc" style="background: rgb(243, 245, 248); border-radius: 10px;">
        <div style="width: 80px; text-align: center; color: rgb(102, 102, 102);">重提范围</div>
        <el-select v-model="chongtiall.type" style="width: 160px;"  placeholder="请选择状态">
          <el-option label="重提提单失败订单（最近7天）" value="1"></el-option>
          <el-option label="重提全部订单（最近7天）" value="2"></el-option>
        </el-select>
      </div>

      <div style="color: #f00; font-size: 12px; margin: 20px 0 0 0;">提醒:确认上游系统支持订单重提，部分接口重提会导致意外问题</div>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="logc = false">取消</el-button>
      	<el-button round type="danger" @click="quedingchongti">确定</el-button>
      </div>
  </el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'


	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'productionBasismanagDj',
		data() {
			return{
        act:1,
        log:false,
        logc:false,
        chongtiall:{
          time:"",
          channel_id:"",
          type:"" //1 异常单 2 全部
        },
        qudaolist:[],
        zidonglog:false,
        all:{
          channel_id:"",//	int	渠道id
          handle_type:0,//	int	0人工处理 1自动处理
        },
				tableData: [],
				//联系微信客服弹窗
				chatwxshow:false,
				//说明文档链接弹窗
				descshow:false,
				//说明文档链接
				desclink:'',
				//开发配置弹窗
				developshow:false,
				//搜索
				searchfrom:{
					c_name:''
				},
        xiugaiall:{
          channel_id:"",
          user_defined_name:""
        },
		shopid:'',
		ischecktimeshow:false,
		checktime:[],
			onlinerow:{}
			}
		},
		created() {
			//获取列表
			this.getlist()
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
		},

		methods: {
      quedingchongti:function(){
        axios.post('/api/plan-market/upstream/order/resubmit',this.chongtiall)
        .then((response) => {
          if (response.data.msg.code == 0) {
            this.logc = false
            this.getlist()
          } else {
          	this.$message.error(response.data.msg.info);
          }
        })
      },
      dingdanchongti:function(item){
        this.chongtiall = {
          time:"",
          channel_id:item.channel_id,
          type:"" //1 异常单 2 全部
        }
        this.logc = true
      },
      xiugai2:function(item){
        this.xiugaiall.channel_id = item.channel_id
        this.xiugaiall.user_defined_name = item.user_defined_name
        this.log = true
      },
      queding2:function(){
        axios.post('/api/plan-market/upstream/channel/defined/name',this.xiugaiall)
        .then((response) => {
          if (response.data.msg.code == 0) {
            this.log = false
            this.getlist()
          } else {
          	this.$message.error(response.data.msg.info);
          }
        })
      },
      xiugai:function(item){
        console.log(item)
        this.all.channel_id = item.channel_id
        this.all.handle_type = item.handle_type.toString()
        this.zidonglog = true
      },
      queding:function(){
        axios.post('/api/plan-market/upstream/channel/handle/type',this.all)
        .then((response) => {
          if (response.data.msg.code == 0) {
            this.zidonglog = false
            this.getlist()
          } else {
          	this.$message.error(response.data.msg.info);
          }
        })
      },
			//获取列表
			getlist(){
				console.log(this.searchfrom)
				axios.get('/api/plan-market/upstream/channel/config/list?c_name='+this.searchfrom.c_name)
				.then((response) => {
					console.log('--===000')
					console.log(response.data.data)
					this.tableData=response.data.data
					for(var x= 0;x<this.tableData.length;x++){
						if(this.tableData[x].data==''){
							this.tableData[x].data='[]'
						}
					}
				})
			},
			//所搜
			search(){
				//获取列表
				this.getlist()
			},
			//点击打开客服二维码弹窗
			openwx(){
				this.chatwxshow=true
			},
			//点击打开查看文档
			checkdesc(link){
				this.descshow=true
				this.desclink=link
			},
			//打开开发配置弹窗
			opendev(){
				this.developshow=true
			},
			//查看在网状态弹窗
			checkison(row){
				console.log(row)
				this.onlinerow = row
				this.ischecktimeshow = true
				this.checktime = []
			},
			//查询
			checkbtn(){
				console.log(this.checktime)
				if(this.checktime==null||this.checktime.length==0){
					this.$message.error('请选择时间');
				}


				axios.post('/api/plan-market/upstream/channel/online/add',{
					"channel_name":this.onlinerow.c_name,
					"channel_id":this.onlinerow.channel_id,
					"start_at":this.checktime[0],
					"end_at":this.checktime[1]
				})
				.then((response) => {
					if (response.data.msg.code == 0) {
						this.$router.push({path:'/productionBasismanag/apicheckorder'})
					} else {
						this.$message.error(response.data.msg.info);
					}
				})



			},
			//在网查询记录
			tocheckison(){
				this.$router.push({path:'/productionBasismanag/apicheckorder'})
			}

		}
	}
</script>


<!-- /deep/ .el-step__description.is-finish{
	color: #7D7D7D;
} -->
</style>
<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
  /deep/ .el-dialog{
    border-radius: 10px;
  }
	.index {

    /deep/ .el-select{min-width: 250px; max-width: 100%; margin-right: 20px;}
    /deep/ .el-input{min-width: 250px; max-width: 100%; margin-right: 20px;}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 14px; color: rgb(51, 51, 51); background: rgb(247, 248, 250); border: 0;}
    /deep/ .el-range-editor .el-range-input { background: #f7f8fa;}
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--text{ padding: 11px 0 !important;}
    /deep/ .el-button--danger.is-plain {
        color: #FFF;
        background-color: #2974FF !important;
        border-color: #2974FF !important;
    }

    /deep/ .el-input__inner:-moz-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
        color: rgb(140, 140, 140);
    }
    /deep/ .td2 .el-button{ padding: 11px 0px !important;}

    /deep/ .pagination-container .el-select{width: 120px; margin-right: 20px;}
    /deep/ .pagination-container .el-input{width: 120px; margin-right: 20px;}
    /deep/ .pagination-container .el-input__inner{line-height: 28px; height: 28px;}
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}
		.t_add_cont{
			padding: 20px 25px;
		}
    /deep/ .el-radio{ display: flex; font-size: 14px;}
		.t_tips_box{
			background-color: #EEF7FF;
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			padding: 20px ;
			color: #7D7D7D;
			margin-bottom: 20px;
		}
		.t_chatkf{
			color: #237BFF;
			margin-left: 20px;
			cursor: pointer;
		}
		.t_djstept_box{
			background-color: #F6F6F6;
			padding: 36px 26px;
			margin-top: 50px;
      }
		.see {
			color: #409EFF;
			margin: 20px 0;
			cursor: pointer;
		}

		.cpflex {
			display: flex;
			flex-wrap: wrap;

			/deep/ .el-form-item {
				margin-bottom: 0px;
			}
		}

		.kucun {
			/deep/ .el-input {
				width: 200px;
			}

			.list {
				display: flex;
				text-align: center;
				border-bottom: 1px #EAEAEA solid;

				.bor1 {
					border-right: 1px #EAEAEA solid;

					i {
						color: #409EFF;
						font-size: 14px;
						margin-left: 10px;
						cursor: pointer;
					}
				}

				.th {
					background: #F9F9F9;
					line-height: 45px;
					flex: 1;
					font-size: 14px;
					box-sizing: border-box;
				}

				.td {
					line-height: 45px;
					font-size: 14px;
					flex: 1;
					box-sizing: border-box;
					color: #666;
				}

				.td2 {
					flex: 1.5
				}
			}
		}



				.o_ul {
					background: #F9F9F9;
					display: flex;

					.o_li {
						flex-basis: 160px;
						line-height: 45px;
						display: block;
						color: #727272;
						border-top: 3px #F9F9F9 solid;
						font-size: 14px;
						text-align: center;
					}

					.act {
						border-top: 3px #DD2727 solid;
						background: #FFFFFF;
					}
				}

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.bsm {
					padding: 20px 20px 0 20px;

					.el-input {
						width: 220px;
					}
				}

				.row2 {
					color: #FFF;
					margin-top: 20px;

					a {
						color: #FFF;
					}
				}

				.con {
					margin: 20px;
					border: 1px #EAEAEA solid;

					.list {
						display: flex;
						text-align: center;
						border-bottom: 1px #EAEAEA solid;

						.bor1 {
							border-right: 1px #EAEAEA solid;

							i {
								color: #409EFF;
								font-size: 14px;
								margin-left: 10px;
								cursor: pointer;
							}
						}

						.th {
							background: #F9F9F9;
							line-height: 45px;
							flex: 1;
							font-size: 14px;
							box-sizing: border-box;
						}

						.td {
							line-height: 45px;
							font-size: 14px;
							flex: 1;
							box-sizing: border-box;
							color: #666;
						}

						.td2 {
							flex: 1.5
						}
					}
				}

				.el-pagination {
					text-align: right;
					margin-right: 20px;
					padding-bottom: 50px;
				}


	}
</style>
